<!DOCTYPE html>
<!-- saved from url=(0066)http://fantaghiro.github.io/miaov/JS_Intermediary_Lessons/3-3.html -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta charset="UTF-8">
	<title>模拟select - 多选</title>
	<style>
		body { margin: 0; padding: 0; }
		ul { padding: 0; margin: 0; }
		li { list-style: none; }
		a { text-decoration: none; color: #000; display: block; }
		#div1 { width: 250px; height: 20px; border: 1px solid #fe6601; padding: 5px; line-height:20px; margin: 20px auto 0 auto;}
		#ul1 { margin: 0 auto; width: 260px; line-height: 20px; border: 1px solid #fe6601; display: none;}
		#ul1 li a { padding: 5px; }
		#ul1 li a:hover { background: #fe6601; color: #fff; }
	</style>
	<script>
		window.onload = function(){

			var oDiv = document.getElementById('div1'),
				oUl = document.getElementById('ul1'),
				arr = [];

			document.onclick = function(){

				oUl.style.display = 'none';
				arr = [];

			}
			oDiv.onclick = function(ev){

				var ev = ev || event;
				ev.cancelBubble = true;
				oUl.style.display = 'block';

			}
			for(var i=0; i<oUl.children.length; i++){

				oUl.children[i].onclick = function(ev){

					var ev = ev || event;

					if(ev.shiftKey){
						ev.cancelBubble = true;						
					}

					for(var i=0; i<arr.length; i++){
						if(arr[i] == this.children[0].innerHTML){
							arr.splice(i, 1);
							oDiv.innerHTML = arr.join(', ');
							bgColor();
							return;
						}
					}

					arr.push(this.children[0].innerHTML);
					oDiv.innerHTML = arr.join(', ');
					bgColor();

					function bgColor(){
						for(var i=0; i<oUl.children.length; i++){
							oUl.children[i].children[0].style.background = '';
							oUl.children[i].children[0].style.color = '';
						}
						var arr1 = oDiv.innerHTML.split(', ');
						for(var i=0; i<arr1.length; i++){
							for(var j=0; j<oUl.children.length; j++){
								if(oUl.children[j].children[0].innerHTML == arr1[i]){
									oUl.children[j].children[0].style.background = '#fe6601';
									oUl.children[j].children[0].style.color = '#fff';
								}
							}
						}
					}	
					
				}

			}

		}
	</script>
</head>
<body>
	<div id="div1">按住shift多选</div>
	<ul id="ul1">
		<li><a href="javascript:;">宋体</a></li>
		<li><a href="javascript:;">黑体</a></li>
		<li><a href="javascript:;">楷体</a></li>
		<li><a href="javascript:;">微软雅黑</a></li>
		<li><a href="javascript:;">新宋体</a></li>
		<li><a href="javascript:;">仿宋</a></li>
	</ul></body></html>